<template>
	<view class="content">
		<listHead :only="only" :title='written'></listHead>
		<view class="top">
			<view class="top-top" v-for="(item,index) in list" :key="index">
				<view class="top-left" v-if="item.title.length>2">{{item.title}}</view>
				<view class="top-left " v-else>
					<view class="top-title">
						{{item.title}}
					</view>
				</view>
				<view class="top-right">{{item.name}}</view>
			</view>
			<view class="top-bottom">
				<view class="top-left">过敏史</view>
				<view class="top-center">

				</view>
				<view class="top-right">花粉</view>
			</view>
			<view class="bottom">
				<view class="bottom-top">
					<view class="bottom-left">药名</view>
					<view class="bottom-right">用量</view>
				</view>
				<view class="bottom-lises">
					<view class=" bottom-top" v-for="(item,index) in optslist" :key="index">
						<view class="lises-left bottom-left"></view>
						<view class="lises-right bottom-right"></view>
					</view>
				</view>
			
			</view>
		</view>
		<view class="bottom-bottom" style="padding: 0 20px;">
			<u-button type="primary" class="btn" text="清空" color="#FF6E91"></u-button>
		</view>
	</view>
</template>

<script>
	import listHead from '../../components/html/listHead.vue'
	export default {
		components: {
			listHead
		},
		data() {
			return {
				only: false,
				written: '母乳喂养',

				list: [{
						title: '床位号',
						name: ''
					},
					{
						title: '病历号',
						name: ''
					},
					{
						title: '姓名',
						name: ''
					},
					{
						title: '年龄',
						name: ''
					},
					{
						title: '性别',
						name: ''
					},
				],
				optslist:[]
			}
		},
		onLoad() {
			var _this = this
			uni.$on('scancodedate', function(content) {
				const add = content.split('|')
				_this.content = add
			})
			let adminValue = uni.getStorageSync('adminValue')
		
			this.written = `母乳喂养-${adminValue.split('-')[2]}`
		},
		methods: {
			nav() {},
			cancel() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.top {
		padding: 20px 20px 0;
	}

	.top-top {
		display: flex;
		align-items: center;
		margin-bottom: 10px;

		.top-left {
			width: 22%;
			height: 36px;
			background: #B9CACB;
			border-radius: 6px 2px 2px 6px;
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 0px;
		}

		.top-title {
			width: 48px;
			text-align-last: justify;
			text-align: justify;
		}

		.top-right {
			width: 78%;
			height: 34px;
			background: #FFFFFF;
			border-radius: 0px 6px 6px 0px;
			border: 1px solid #B9CACB;
			border-left: 0px;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
		}

	}

	.top-bottom {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		// padding: 0 20px;

		.top-left {
			width: 22%;
			height: 36px;
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FF4D65;
			line-height: 36px;
			text-align: center;
		}

		.top-center {
			width: 1px;
			height: 20px;
			background: #F2F2F2;
		}

		.top-right {
			width: 78%;
			height: 36px;
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #333333;
			line-height: 36px;
			padding: 0 24rpx;
		}
	}

	.bottom {
		height: calc(100% - 444px);
		// background: #F8F8F8;
		// padding: 0 20px;

		.bottom-top {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.bottom-left {
				width: 70%;
				padding-left: 5px;
				font-size: 14px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #999999;
				line-height: 21px;
			}

			.bottom-right {
				font-size: 14px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #999999;
				line-height: 21px;
			}
		}
	}

	.bottom-lises {
		overflow-y: scroll;
		height: calc(100% - 30px);
		.bottom-top{
			&:before{
				content: " ";
				width: 4px;
				height: 4px;
				background: #DADADA;
				border-radius: 50%;
			}
		}
		.lises-left {
			color: #222222 !important;
		}

		.lises-right {
			color: #666666 !important;
		}
	}

	.bottom-bottom {
		padding: 0 20px;
		margin-top: 20px;
	}

	.u-reset-button ::v-deep .u-button__text {
		font-size: 22px !important;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 33px;
		letter-spacing: 12px;
	}

	.btn {
		box-shadow: 0px 2px 6px 0px #FF6E91;
		height: 56px;
	}
</style>
